<template>
  <v-card title="Tabs页签切换">
    <v-tabs  v-model="detailKey">
      <template slot="tabBarExtraContent">
        <v-button @click="loadTable('1')" class="ml-10">加载1</v-button>
        <v-button @click="loadTable('2')" class="ml-10">加载2</v-button>
        <v-button @click="loadTable('3')" class="ml-10">加载3</v-button>
        <v-button @click="handleText" class="ml-10">测试</v-button>
      </template>
      <v-tab-pane key="1" tab="Tabs1">
        <vcu-table
          :height="tableHeight"
          :loadOptions="loadOptions1"
          highlight-current-row
          keep-source
          locking
          ref="xTable1"
        ></vcu-table>
      </v-tab-pane>
      <v-tab-pane forceRender key="2" tab="Tabs2">
        <vcu-table
          :height="tableHeight"
          :loadOptions="loadOptions2"
          highlight-current-row
          keep-source
          auto-resize
          locking
          ref="xTable2"
        ></vcu-table>
      </v-tab-pane>
      <v-tab-pane forceRender key="3" tab="Tabs3">
        <vcu-table
          :height="tableHeight"
          :loadOptions="loadOptions3"
          highlight-current-row
          keep-source
          auto-resize
          locking
          ref="xTable3"
        ></vcu-table>
      </v-tab-pane>
    </v-tabs>
  </v-card>
</template>
<script>
export default {
  data() {
    return {
      detailKey: "1",
      tableHeight: 500,
      loadOptions1: {
        headUrl: "dataq/api/header",
        pageUrl: "dataq/api/page",
      },
      loadOptions2: {
        headUrl: "colspan/datas/header",
        pageUrl: "colspan/datas/page",
      },
      loadOptions3: {
        headUrl: "dataq/api/header/getInHospPatientList",
        pageUrl: "dataq/api/page/getInHospPatientList",
      },
    };
  },
  mounted() {},
  methods: {
    loadTable(key) {
      this.detailKey = key;
      this.$refs[`xTable${key}`].getTableListData(true);
    },
    handleText(){
      const { fullData } = this.$refs.xTable1.getTableData(); 
      let params = fullData.map((v) => {
        return { YBDZID: v.hospDepartCode, DZMXID: v.inHospDeptId };
      });
      console.info(params)
    }
  },
};
</script>
